<template>
	<view class="container">
		<view class="logo">
			<view class="is-flex is-column is-justify-center  is-align-center">
				<image src="../../static/img/login/logo.png" mode="aspectFit" class="logoimg"></image>
			</view>
		</view>
		
		<form :report-submit="true" @submit="formLogin">
			<view class="input_content">
				
				<view class="input_item">
					<tui-icon name="mobile" :size="20" color='#999999'></tui-icon>
					<input placeholder-class="phcolor" class="is_input" name="mobile" @blur="mobileChange" placeholder="请输入手机号码" maxlength="11" v-model="mobile" type="number" />
				</view>
				
				<view class="input_item">
					<tui-icon name="pwd" :size="20" color='#999999'></tui-icon>
					<input placeholder-class="phcolor" class="is_input" name="smsCode" placeholder="请输入验证码" maxlength="6" type="number" />
					<view class="codeimg" :type="type" :plain="true" :disabled="disabled" @click="btnSend">{{btnText}}</view>
				</view>
				
               
				<view class="input_con">
					<view class="regtxt">注册即表示您已同意</view>
					<view class="regxy">《钱颜用户协议》</view>
				</view>
			   
				<view class="loginbtn">
				   <button :disabled="butSubmit" :loading="butLoading" hover-class="btn-hover" form-type="submit">注 册</button>
				</view>
				
				
			</view>
		</form>
	</view>
</template>

<script>
    import util from "@/utils/util.js"
	
	export default {
		
		data() {
			return {
				disabled: false,
				btnText: "获取验证码",
				mobile: "",
				type: "primary",
				code: "",
				codeSubmit:false,
                butSubmit: false,
                butLoading:false
			}
		},
		methods: {
			// 六位随机数
			// getRandom: function(u) {
			// 	let _this = this;
			// 	_this.codeSubmit = true;
			// 	let rnd = "";
			// 	u = u || 6;
			// 	for (var i = 0; i < u; i++) {
			// 		rnd += Math.floor(Math.random() * 10);
			// 	}
			// 	return Number(rnd);
			// },
			
			
			// 短信验证接口
			getRandom: function() {	
				let _this = this;
				_this.$http.post( _this.baseUrl + '/app/user/sendAuthCode/', {
				    mobile: this.mobile
				    
				}).then(res => {
					_this.codeSubmit = true;
					if(res.data.errno == 500){
						_this.tui.toast(res.data.errmsg);
					}else{
						console.log(res.data.errmsg)
					}
					
				}).catch(err => {
					console.log(err)
				})
			},
			
			doLoop: function(seconds) {
				this.getRandom();
				// let code = this.getRandom(6);
				// this.tui.toast('您本次的验证码是：' + code, 5000);
				seconds = seconds ? seconds : 60;
				this.btnText = seconds + "s后获取";
				// this.code = code
				let countdown = setInterval(() => {
					if (seconds > 0) {
						this.btnText = seconds + "s后获取"
						--seconds;
					} else {
						this.btnText = "获取验证码";
						this.disabled = false;
						this.type = "primary";
						this.codeSubmit = false;
						clearInterval(countdown);
					}
				}, 1000);
			},
			
			btnSend: function() {
				if (util.isNullOrEmpty(this.mobile)) {
					this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(this.mobile)) {
					this.tui.toast('手机号输入有误，请重新输入');
					return
				}
				this.disabled = true;
				this.type = "gray"
				if(!this.codeSubmit){
					this.btnText = "请稍候...";
					setTimeout(() => {
						this.doLoop(60)
					}, 500)
				}else{
					console.log(this.codeSubmit)
				}
				
			},
			
			formLogin: function(e) {
				let loginCode = e.detail.value.smsCode;
				let mobile = e.detail.value.mobile;
				if (util.isNullOrEmpty(mobile)) {
					this.tui.toast('请输入手机号码');
					return
				} else if (!util.isMobile(mobile)) {
					this.tui.toast('手机号输入有误，请重新输入');
					return
				} else if (util.isNullOrEmpty(loginCode)) {
					this.tui.toast('请输入验证码');
					return
				}
                
                this.butSubmit = true;
                this.butLoading = true;
                let _this = this;
				
				_this.$http.post( _this.baseUrl + '/app/user/simpleRegister/', {
				    mobile: mobile,
				    authCode: loginCode
				}).then(res => {
					console.log(res)
					if(res.data.code == 0){
						
						let reData = res.data.userInfo;
						_this.tui.toast("注册成功", 2000, true);
						
						uni.reLaunch({
							url: 'codeLogin'
						})
					}else{
						_this.$api.msg(res.data.errmsg);
						_this.butSubmit = false;
						_this.butLoading = false;
					}					
                }).catch(err => {
                    _this.butSubmit = false;
                    _this.butLoading = false;
                })
			},
			mobileChange(){
				let _this = this;
				_this.$http.post( _this.baseUrl + '/app/user/isRegisteredByMobile/', {
				    mobile: _this.mobile,
				}).then(res => {
					if(res.data.errno == 0){
						console.log(res.data.errmsg)						
					}else{
						_this.$api.msg(res.data.errmsg);
						
					}					
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
	
	.reg {
		width: 100%;
		text-align: center;
		border-bottom: 1px solid #f1f1f1;
		padding-top: 25rpx;
		padding-bottom: 25rpx;
	}
	
	/* logo */
	.logo {
		text-align: center;
		margin: 50rpx auto 50rpx auto;
	}

	.logoimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	/* 表单 */
	/* input框 */
	.input_content {
		width: 85%;
		margin: 0 auto;
	}

	.input_item {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		color: #999999;
		font-size: 14px;
		box-sizing: border-box;
		appearance: none;
		box-shadow: none;
		border-radius: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		border: 2rpx solid #e5e5e5;
		outline: 0;
		font-family: inherit;
		background: #fff;
		resize: none;
		padding-left: 30rpx;
		padding-right: 30rpx;
		margin-bottom: 50upx;
	}

	.input_img {
		width: 20px;
		height: 20px;
	}

	.is_input {
		font-size: $font-base + 2upx;
		color: $font-color-dark;
		width: 100%;
		padding-left: 5px;
	}
	
	.input_item:nth-child(2){
		margin-bottom: 20upx;
	}

	/* 获取验证码 */
	.codeimg {
		position: absolute;
		font-size: 12px;
		right: 9%;
		z-index: 999;
		width: 150rpx;
		text-align: center;
		color: #6E609E;
		/* margin-top: -11%; */
		background: #fff;
		border-top-right-radius: 44rpx;
		border-bottom-right-radius: 44rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-left: 1px solid #e5e5e5;
	}

	/* 按钮 */
	.loginbtn {
		width: 100%;
		margin: 10px auto;
	}

	.loginbtn button {
		margin-top: 20rpx;
		height: 88rpx;
		width: 100%;
		line-height: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
		border-radius: 44rpx;
		outline: 0;
		display: block;
		margin: 0;
		font-family: inherit;
		background: #6E609E;
		opacity: 0.8;
	}

	button:after {
		border: 2rpx solid #f2f2f2;
	}


	/* 其他登录 */
	.other {
		text-align: center;
		margin-top: 230rpx;
	}

	.othertxt {
		font-size: 14px;
		color: #666666;
		margin-bottom: 60rpx;
	}

	.otherLogin {
		font-size: 14px;
		color: #666666;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.wximg {
		width: 50px;
		height: 47px;
	}

	.dximg {
		width: 50px;
		height: 47px;
	}

	/*用户协议*/
	.input_con{
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #cccccc;
		margin-bottom: 12px;
	}
	.regtxt {
		padding-left: 16px;
	}

	.regxy {
		color: #D90C0C;
	}
</style>
